<template>
  <div>
    <div class="crumbs">
      <el-form ref="form" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="派发日期">
          <el-date-picker clearable v-model="formInline.timeValue" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="证书名称/ID/编码">
          <el-input v-model="formInline.name" placeholder="请输入证书名称/ID/编码" clearable></el-input>
        </el-form-item>
        <el-form-item label="派发状态">
          <el-select v-model="formInline.status" clearable placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch('form')">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="120"></el-table-column>
      <el-table-column prop="system_user_name" label="派发人" width="100"></el-table-column>
      <el-table-column prop="certificate_product_code" label="证书编码" width="200"></el-table-column>
      <el-table-column prop="certificate_name" label="证书名称"></el-table-column>
      <el-table-column prop="rule_fund_type" label="派发规则" width="150" :formatter="typeFormat"></el-table-column>
      <el-table-column prop="integral" label="积分" width="100"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column prop="status_text" label="派发状态" width="130"></el-table-column>
      <el-table-column prop="distribute_date" label="派发时间" width="150"></el-table-column>
      <el-table-column prop="create_time" label="操作时间" width="150" :formatter="timeFormat"></el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @current-change ="handleCurrentChange"
        layout="total, prev, pager, next"
        :page-size="textData.per_page"
        :total="textData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    data () {
      return {
        formInline: {
          timeValue: '',
          name: '',
          status: ''
        },
        options: [{
          value: '',
          label: '全部'
        }, {
          value: 1,
          label: '派发成功'
        }, {
          value: 0,
          label: '派发失败'
        }]
      }
    },
    computed: {
      ...mapState({
        tableData: state => state.certificate.distributePageList,
        textData: state => state.certificate.pageData
      })
    },
    created () {
      this.distributePageList()
    },
    methods: {
      async distributePageList () {
        let payload = {
          page: this.textData.current_page,
          listRows: this.textData.per_page,
          distribute_date: this.$route.query.timeValue,
          transfer_status: this.$route.query.status,
          keywords: this.$route.query.name
        }
        await this.$store.dispatch('certificate/distributePageList', payload)
      },
      onSearch (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.formInline.timeValue === '') {
              this.formInline.timeValue = ''
            } else {
              let time = new Date(this.formInline.timeValue)
              this.formInline.timeValue = time.getFullYear() + '-' + Number(time.getMonth() + 1) + '-' + time.getDate()
            }
            this.$router.push({path: '/certificate/distributelog', query: {timeValue: this.formInline.timeValue, name: this.formInline.name, status: this.formInline.status}})
            this.distributePageList()
          }
        })
      },
      handleCurrentChange (val) {
        this.textData.current_page = val
        this.distributePageList()
      },
      timeFormat: function (value) {
        let mydate = new Date()
        mydate.setTime(value.create_time * 1000)
        let result = mydate.getFullYear() + '-' + (mydate.getMonth() + 1) + '-' + mydate.getDate()
        return result
      },
      typeFormat: function (value) {
        let moneyText = ''
        let fundNum = 0
        if (value.rule_fund_type === 'money') {
          moneyText = '(元)人民币'
          fundNum = Number(value.rule_fund) / 100
        } else {
          moneyText = '(个)亚数币'
          fundNum = Number(value.rule_fund)
        }
        return fundNum + moneyText + '赠送' + value.rule_integral + '个积分'
      }
    }
  }
</script>

<style scoped>
  .crumbs {
    display: inline-block;
    vertical-align: top;
    margin-right: 50px;
  }
</style>
